<template>
  <div>
    <ComDialog
      :width="'800'"
      @EventClose="closeFn"
      :dialogVisible="dialogVisible"
      title="新增卡券"
    >
      <el-form
        :model="Formdata"
        :rules="rules"
        ref="Formdata"
        label-width="100px"
        class="demo-Formdata"
      >
        <!-- 选项 -->
        <el-form-item label="卡券金额" prop="amount">
          <el-input v-model.number="Formdata.amount"></el-input>
        </el-form-item>
        <el-form-item label="使用门槛" prop="symk">
          <el-input v-model.number="Formdata.symk"></el-input>
        </el-form-item>
        <el-form-item label="发行量" prop="sum">
          <el-input v-model.number="Formdata.sum"></el-input>
        </el-form-item>

        <el-form-item label="可用服务" prop="typeList">
          <el-select
            @change="selectFn"
            multiple
            v-model="Formdata.typeList"
            placeholder="可用服务(选择了通用就不可再选其他哦)"
          >
            <el-option
              v-for="(item, index) in dict"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户权限" prop="permission">
          <el-select v-model="Formdata.permission" placeholder="用户权限">
            <el-option label="可赠送" value="0"></el-option>
            <el-option label="不可赠送" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择日期" prop="expire">
          <el-date-picker
            value-format="yyyy-MM-dd hh:mm:ss"
            v-model="Formdata.expire"
            type="datetimerange"
            picker-options="/"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
          <div style="margin-left: 50px; display: inline-block">
            <input type="checkbox" @change="changeExpireType" />
            <span>自领取器</span
            ><input v-model="Formdata.expireTime" style="width: 30px" />
            <span>天内</span>
          </div>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="closeFn">取消</el-button>

        <el-button
          type="primary"
          @click="addFn(1)"
          v-hasPermi="['market:coupon:add']"
          >保存</el-button
        >
      </template>
    </ComDialog>
  </div>
</template>

<script>
import ComDialog from "../../../components/comDialog.vue";
import {
  getCouponAddApi,
  getCouponGetInfoApi,
  getCouponEditApi,
} from "@/wss/api/systemManagement/Cvm/settting.js";
export default {
  components: { ComDialog },
  props: {
    dict: {
      type: Array,
      default: [],
    },
    editId: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 当前选择数字数组
      answerArr: [2],
      // 请求参数
      Formdata: {
        expireType: 0,
        sum: "",
        typeList: [],
        pattern: "",
        expireTime: "",
        expire: [],
        symk: "",
        permission: "",
        amount: "",
      },
      // 验证规则
      rules: {
        no: [
          {
            type: "number",
            required: true,
            message: "无效",
            trigger: "blur",
          },
        ],
        amount: [
          {
            type: "number",
            required: true,
            message: "无效",
            trigger: "blur",
          },
        ],
        sum: [
          {
            type: "number",
            required: true,
            message: "无效",
            trigger: "blur",
          },
        ],
        typeList: [
          {
            required: true,
            message: "请至少选择一个类型",
            trigger: ["change"],
          },
        ],
        symk: [
          {
            required: true,
            message: "无效",
            trigger: "blur",
            type: "number",
          },
        ],
        expire: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        permission: [
          {
            required: true,
            message: "请至少选择一个权限",
            trigger: ["change"],
          },
        ],

        expireTime: [
          {
            required: true,
            message: "请至少选择一个答案",
            trigger: "blur",
          },
        ],
      },
    };
  },

  watch: {
    editId: "getCouponEditFn",
  },
  methods: {
    // 改变有效期类型
    changeExpireType(e) {
      // 0是按照时间或1是按照天数
      this.Formdata.expireType = Number(e.target.checked);
    },
    // 选择可用金额
    selectFn(value) {
      value.includes("0") ? (this.Formdata.typeList = ["0"]) : "";

      console.log(value);
    },
    // 修改
    async getCouponEditFn(newVal, oldVal) {
      if (newVal) {
        let { data } = await getCouponGetInfoApi({ id: this.editId });
        // 回显数据
        this.Formdata = data;
        this.Formdata.typeList = this.Formdata.type.split(",");

        this.Formdata.expire ||= []; //this.Formdata.expire ||this.Formdata.expire  =[]
        this.Formdata.expire.push(data.expireStart);
        this.Formdata.expire.push(data.expireEnd);
      }
      console.log({ newVal, oldVal });
    },
    // 添加
    async addFn() {
      try {
        let result = null;
        // 获取有效与无效日期
        this.Formdata.expireStart = this.Formdata.expire[0];
        this.Formdata.expireEnd = this.Formdata.expire[1];
        if (this.editId) {
          // 修改
          this.Formdata.id = this.editId;

          result = await getCouponEditApi(this.Formdata);
        } else {
          // 保存
          await this.$refs.Formdata.validate();
          // 需要保留两位并且是number类型
          this.Formdata.symk = parseFloat(this.Formdata.symk.toFixed(2));
          this.Formdata.sum = parseFloat(this.Formdata.sum.toFixed(2));
          this.Formdata.amount = parseFloat(this.Formdata.amount.toFixed(2));
          result = await getCouponAddApi(this.Formdata);
        }

        this.$emit("getListEven");
        this.$message({
          type: "success",
          message: result.msg,
        });
        this.closeFn();
      } catch (error) {
        this.$message({
          type: "error",
          message: error,
        });
      }
    },
    closeFn() {
      this.Formdata = {
        pickerOptions: "",
        typeList: [],
        pattern: "",
        expireTime: "",
        expire: 0,
        symk: "",
        permission: "",
        no: "",
      };
      this.$refs.Formdata.resetFields();
      // 清空编辑的id
      this.$emit("update:editId", "");
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.optionRow {
  display: flex;
  margin: 10px 0px;
}
.delete-button {
  margin-left: 10px;
}
</style>